<template>
  <div>
    <h3>首页</h3>
    <!-- <div>{{stateHome}}</div> -->
    <div>{{h11}}</div>
    <div>{{bLoading}}</div>
    <div>{{getterBloading}}</div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
// import axios from 'axios';//类型AxiosStatic
import {State,Getter,Action,Mutation} from 'vuex-class'
@Component({})
// export default class extends Vue {
//   mounted(): void {
//     axios({
//       url: "http://jsonplaceholder.typicode.com/users"
//     }).then(res=>{
//       console.log(res)
//     })
//   }
// }

export default class Home extends Vue{
  //装饰state
  @State bLoading:boolean|undefined;
  @State('home') stateHome!:object[]  //组件内的stateHome使用
  @State(state=>state.home[0]) h11!:object//回调形式抓取state

  // 装饰getters
  @Getter('bLoadingGtters') getterBloading!:string;
  @Getter bLoadingGtters!:boolean;

  @Action('UPDATE_HOME') updateHome!:(payload:object)=>void
  @Action UPDATE_HOME!:(payload:object)=>void

  @Mutation('UPDATE_LOADING') upLoading!:(payload:boolean)=>void;
  @Mutation UPDATE_LOADING!:(payload:boolean)=>void;

  mounted(){
    this.UPDATE_HOME({
      _page:1,
      _limit:1
    })

    this.upLoading(true)
  }
}
</script>
